$spinner-color: #fff !default;

$spinner-size: 1em;
$spinner-bar-width: .1em;
$spinner-bar-height: .25em;

.x-spinner {
  height: $spinner-size;
  width: $spinner-size;
  margin-left:              -$spinner-size/2;
  -webkit-transform-origin: $spinner-size/2 $spinner-size/2;
  
  /* Shared Properties for all the bars */
  & > span, & > span:before, & > span:after {
    display: block;
    position: absolute;
    width: $spinner-bar-width;
    height: $spinner-bar-height;
    top: 0;
    -webkit-transform-origin: $spinner-bar-width/2 $spinner-size/2;
    @include border-radius($spinner-bar-width/2);
    content: " ";
  }
  
  & > span {
    &.top           {  background-color: rgba($spinner-color,0.99); }
    &.top::after    {  background-color: rgba($spinner-color,0.90); }
    &.left::before  {  background-color: rgba($spinner-color,0.80); }
    &.left          {  background-color: rgba($spinner-color,0.70); }
    &.left::after   {  background-color: rgba($spinner-color,0.60); }
    &.bottom::before{  background-color: rgba($spinner-color,0.50); }
    &.bottom        {  background-color: rgba($spinner-color,0.40); }
    &.bottom::after {  background-color: rgba($spinner-color,0.35); }
    &.right::before {  background-color: rgba($spinner-color,0.30); }
    &.right         {  background-color: rgba($spinner-color,0.25); }
    &.right::after  {  background-color: rgba($spinner-color,0.20); }
    &.top::before   {  background-color: rgba($spinner-color,0.15); }
  }
}

.x-spinner > span {
  left:         50%;
  margin-left:  -0.05em;
}

// .x-spinner > span::before, .x-spinner > span::after{  content: " "; }

/* Rotate each of the 4 Spans */

.x-spinner > span.top{    -webkit-transform: rotate(0deg);    -moz-transform: rotate(0deg);   }
.x-spinner > span.right{  -webkit-transform: rotate(90deg);   -moz-transform: rotate(90deg);  }
.x-spinner > span.bottom{ -webkit-transform: rotate(180deg);  -moz-transform: rotate(180deg); }
.x-spinner > span.left{   -webkit-transform: rotate(270deg);  -moz-transform: rotate(270deg); }

/* These are the two lines that surround each of the 4 Span lines */

.x-spinner > span::before{-webkit-transform: rotate(30deg);   -moz-transform: rotate(30deg);  }
.x-spinner > span::after{ -webkit-transform: rotate(-30deg);  -moz-transform: rotate(-30deg); }

/* Set Animation */

.x-spinner {
  -webkit-animation-name:             x-spinner-rotate;
  -webkit-animation-duration:         .5s;
  -webkit-animation-iteration-count:  infinite;
  -webkit-animation-timing-function:  linear;
}

@-webkit-keyframes x-spinner-rotate{
  0%{     -webkit-transform: rotate(0deg);   }
  8.32%{  -webkit-transform: rotate(0deg);   }

  8.33%{  -webkit-transform: rotate(30deg);  }
  16.65%{ -webkit-transform: rotate(30deg);  }

  16.66%{ -webkit-transform: rotate(60deg);  }
  24.99%{ -webkit-transform: rotate(60deg);  }

  25%{    -webkit-transform: rotate(90deg);  }
  33.32%{ -webkit-transform: rotate(90deg);  }

  33.33%{ -webkit-transform: rotate(120deg); }
  41.65%{ -webkit-transform: rotate(120deg); }

  41.66%{ -webkit-transform: rotate(150deg); }
  49.99%{ -webkit-transform: rotate(150deg); }

  50%{    -webkit-transform: rotate(180deg); }
  58.32%{ -webkit-transform: rotate(180deg); }

  58.33%{ -webkit-transform: rotate(210deg); }
  66.65%{ -webkit-transform: rotate(210deg); }

  66.66%{ -webkit-transform: rotate(240deg); }
  74.99%{ -webkit-transform: rotate(240deg); }

  75%{    -webkit-transform: rotate(270deg); }
  83.32%{ -webkit-transform: rotate(270deg); }

  83.33%{ -webkit-transform: rotate(300deg); }
  91.65%{ -webkit-transform: rotate(300deg); }

  91.66%{ -webkit-transform: rotate(330deg); }
  100%{   -webkit-transform: rotate(330deg); }
}